<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱采购首页</title>
    <link rel="stylesheet" href="/CSS/2.通用样式.css">
    <link rel="stylesheet" href="/CSS/爱采购/iconfont.css">
    <style>
        /* 头部 */
        header {
            display: flex;
            width: 100%;
            height: 60px;
            position: fixed;
            top: 0;
            border-bottom: 1px solid lightgrey;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            justify-content: space-evenly;
            align-items: center;
            z-index: 2;
            background-color: white;
            transition: background-color 0.3s ease;
        }

        header .图形 {
            width: 24px;
            height: 24px;
            color: orange;
            z-index: 1;
        }

        header h3 {
            color: black;
        }

        header .购物车 {
            color: white;
        }

        header .搜索 {
            height: 24px;
            border-radius: 50px;
            border-color: white;
        }

        /* 主体 */
        main {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
            margin-bottom: 48px;
        }

        main img {
            width: 100%;
            height: 200px;
        }

        main .链接 {
            display: flex;
            width: 88%;
            height: 60px;
            margin-top: 20px;
            justify-content: space-evenly;
            border: 1px solid lightgrey;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        main label {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        main input {
            display: none;
        }

        main input:checked~p,
        main input:checked~span {
            color: red;
        }

        main .推荐 {
            display: flex;
            width: 88%;
            height: 220px;
            margin-top: 30px;
            justify-content: space-evenly;
            border: 1px solid lightgrey;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        main .标题上 {
            display: flex;
            width: 100%;
            margin-top: 30px;
            justify-content: space-evenly;
            padding-top: 10px;
            border-bottom: 1px solid lightgrey;
            padding-bottom: 10px;
        }

        main .标题下 {
            display: flex;
            width: 100%;
            margin-top: 20px;
            justify-content: space-evenly;
            padding-bottom: 20px;
        }

        main .内容 {
            height: 100%;
            width: 80%;
            display: flex;
            flex-direction: column;
            margin-top: 10px;
        }

        main .内容 .item {
            display: flex;
            justify-content: space-evenly;
            margin-top: 10px;
            border: 1px solid lightgrey;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        main .内容 .左 img {
            height: 100px;
            width: 100px;
            border-radius: 10px;
        }

        main .内容 .右 {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }

        /* 脚部 */
        footer {
            display: flex;
            width: 100%;
            height: 48px;
            position: fixed;
            bottom: 0;
            border: 1px solid lightgrey;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 5px;
            left: 0;
            right: 0;
            margin: 0 auto;
            background-color: white;
            z-index: 2;
        }

        footer label {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        footer input {
            display: none;
        }

        footer input:checked~p,
        footer input:checked~span {
            color: red;
        }

        .sticky {
            position: sticky;
            top: 60px;
            /* 与 header 的高度一致 */
            background-color: white;
            z-index: 1;
        }

    </style>
</head>

<body>
    <header>
        <div>
            <p class="图形"><span class="iconfont icon-logo-aicaigou"></span></p>
        </div>
        <h3 class="文字">爱采购</h3>
        <input type="text" class="搜索" placeholder="搜商品，厂家">
        <div>
            <p class="购物车"><span class="iconfont icon-daifahuo"></span></p>
        </div>
    </header>


    <main>
        <img class="背景" src="/素材/img/头部背景.png" alt="图片加载失败！">
        <div class="链接">
            <label for="询价">
                <input name="顶部" id="询价" type="radio">
                <p class="图形"><span class="iconfont icon-chaxun"></span></p>
                <span>询价</span>
            </label>
            <label for="超市">
                <input name="顶部" id="超市" type="radio">
                <p class="图形"><span class="iconfont icon-daifahuo"></span></p>
                <span>超市</span>
            </label>
            <label for="消费">
                <input name="顶部" id="消费" type="radio">
                <p class="图形"><span class="iconfont icon-icon2fuzhi"></span></p>
                <span>消费</span>
            </label>
            <label for="注册">
                <input name="顶部" id="注册" type="radio">
                <p class="图形"><span class="iconfont icon-tianjia"></span></p>
                <span>注册</span>
            </label>
            <label for="社区">
                <input name="顶部" id="社区" type="radio">
                <p class="图形"><span class="iconfont icon-changjia"></span></p>
                <span>社区</span>
            </label>
        </div>

        <div class="推荐">
            <div class="左">
                <img src="/素材/img/左.png" alt="图片加载失败！">
            </div>

            <div class="右">
                <img src="/素材/img/右.png" alt="图片加载失败！">
            </div>
        </div>

        
        <div class="标题上 sticky" id="titleUpper">
            <label for="厂家">
                <input checked name="标题" id="厂家" type="radio">
                <span>厂家</span>
            </label>
            <label for="商品">
                <input name="标题" id="商品" type="radio">
                <span>商品</span>
            </label>
        </div>

        <div class="标题下 sticky" id="titleLower">
            <label for="推荐">
                <input checked name="子标题" id="推荐" type="radio">
                <span>推荐</span>
            </label>
            <label for="设备">
                <input name="子标题" id="设备" type="radio">
                <span>设备</span>
            </label>
            <label for="建材">
                <input name="子标题" id="建材" type="radio">
                <span>建材</span>
            </label>
            <label for="百货">
                <input name="子标题" id="百货" type="radio">
                <span>百货</span>
            </label>
            <label for="V">
                <input name="子标题" id="V" type="radio">
                <span>V</span>
            </label>
        </div>

        <div class="内容">
            <div class="item">
                <div class="左"><img src="/素材/img/商品.png" alt=""></div>
                <div class="右">
                    <div class="上">山阳联丰生物科技有限公司</div>
                    <div class="下">主营业务:植物提取...</div>
                </div>
            </div>
            <div class="item">
                <div class="左"><img src="/素材/img/商品.png" alt=""></div>
                <div class="右">
                    <div class="上">山阳联丰生物科技有限公司</div>
                    <div class="下">主营业务:植物提取...</div>
                </div>
            </div>
            <div class="item">
                <div class="左"><img src="/素材/img/商品.png" alt=""></div>
                <div class="右">
                    <div class="上">山阳联丰生物科技有限公司</div>
                    <div class="下">主营业务:植物提取...</div>
                </div>
            </div>
            <div class="item">
                <div class="左"><img src="/素材/img/商品.png" alt=""></div>
                <div class="右">
                    <div class="上">山阳联丰生物科技有限公司</div>
                    <div class="下">主营业务:植物提取...</div>
                </div>
            </div>
            <div class="item">
                <div class="左"><img src="/素材/img/商品.png" alt=""></div>
                <div class="右">
                    <div class="上">山阳联丰生物科技有限公司</div>
                    <div class="下">主营业务:植物提取...</div>
                </div>
            </div>
            <div class="item">
                <div class="左"><img src="/素材/img/商品.png" alt=""></div>
                <div class="右">
                    <div class="上">山阳联丰生物科技有限公司</div>
                    <div class="下">主营业务:植物提取...</div>
                </div>
            </div>
            <div class="item">
                <div class="左"><img src="/素材/img/商品.png" alt=""></div>
                <div class="右">
                    <div class="上">山阳联丰生物科技有限公司</div>
                    <div class="下">主营业务:植物提取...</div>
                </div>
            </div>
            <div class="item">
                <div class="左"><img src="/素材/img/商品.png" alt=""></div>
                <div class="右">
                    <div class="上">山阳联丰生物科技有限公司</div>
                    <div class="下">主营业务:植物提取...</div>
                </div>
            </div>
            <div class="item">
                <div class="左"><img src="/素材/img/商品.png" alt=""></div>
                <div class="右">
                    <div class="上">山阳联丰生物科技有限公司</div>
                    <div class="下">主营业务:植物提取...</div>
                </div>
            </div>
            <div class="item">
                <div class="左"><img src="/素材/img/商品.png" alt=""></div>
                <div class="右">
                    <div class="上">山阳联丰生物科技有限公司</div>
                    <div class="下">主营业务:植物提取...</div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <label for="首页">
            <input checked name="底部" id="首页" type="radio">
            <p class="图形"><span class="iconfont icon-shouye1"></span></p>
            <span>首页</span>
        </label>

        <label for="询价">
            <input name="底部" id="询价" type="radio">
            <p class="图形"><span class="iconfont icon-chaxun"></span></p>
            <span>询价</span>
        </label>

        <label for="消息">
            <input name="底部" id="消息" type="radio">
            <p class="图形"><span class="iconfont icon-xiaoxi1"></span></p>
            <span>消息</span>
        </label>

        <label for="我的">
            <input name="底部" id="我的" type="radio">
            <p class="图形"><span class="iconfont icon-zhuanrenfuwu"></span></p>
            <span>我的</span>
        </label>

    </footer>


    <script>
        // 封装处理函数
        function handleHeaderBackground() {
            const header = document.querySelector('header');
            const backgroundImage = document.querySelector('.背景');
            if (backgroundImage) {
                const imageHeight = backgroundImage.offsetHeight;
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                if (scrollTop < imageHeight) {
                    header.style.backgroundColor = 'transparent';
                    header.style.borderBottom = 'none';
                    header.style.boxShadow = 'none';
                } else {
                    header.style.backgroundColor = 'white';
                    header.style.borderBottom = '1px solid lightgrey';
                    header.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
                }
            }
        }

        function handleStickyElements() {
            const titleUpper = document.getElementById('titleUpper');
            const titleLower = document.getElementById('titleLower');
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const headerHeight = document.querySelector('header').offsetHeight;

            if (scrollTop >= titleUpper.offsetTop - headerHeight) {
                titleUpper.classList.add('sticky');
            } else {
                titleUpper.classList.remove('sticky');
            }

            if (scrollTop >= titleLower.offsetTop - headerHeight) {
                titleLower.classList.add('sticky');
            } else {
                titleLower.classList.remove('sticky');
            }
        }

        // 页面加载完成时调用处理函数
        window.addEventListener('load', () => {
            handleHeaderBackground();
            handleStickyElements();
        });

        // 监听滚动事件
        window.addEventListener('scroll', () => {
            handleHeaderBackground();
            handleStickyElements();
        });
    </script>
</body>

</html>